<template>
	<view class="shoppingcar">
	  <!-- 不存在购物车商品信息或未登录开始-->
	  <view v-if="cart.length==0 || !login"  class="none">
	  <view> 
	  <image src="@/static/noneshoppingcar.png" mode="widthFix"></image>
	  <!-- 未登录状态 -->
	  <view class="nologin" v-if="!login">
	    <text>登录后才能查看购物车哦~</text>
	    <navigator url="/pages/login/login" hover-class="none">
			<text> 前往登录</text>
	   </navigator>
	  </view>
	  <!-- 已登录购物车为空 -->
	  <view v-else class="login">
	  <text>购物车还是空的</text>
	  </view>
	  </view>                
	  </view>           
	  <!-- 不存在购物车商品信息结束--> 
	<!-- 存在购物车商品信息开始-->
	  <view  v-else class="chang">
	  <view  v-for="item in cart" v-if="index" class="cart" :key="item">
	  <checkbox-group bindtap="cal" data-name="chang" :data-information="item"> 
	  <checkbox color="#3c9cff" :checked="item.checked" ></checkbox>
	  </checkbox-group>
	  <view class="navigator" bindtap="turnto" :data-information="item"> 
	  <image :src="item.img[0]" mode="widthFix"></image>   
	  <view class="information">         
	    <view class="name">{{item.name}}</view>     
	    <view class="select">规格：默认</view>  
	    <view class="price">￥{{item.discount}}</view>
	  </view>   
	  </view> 
	  <view class="btn">    
	       <button size="mini" bindtap="cal" data-name="del" class="btn1" :data-information="item">-</button>
	      <input :value="item.num" type="number" maxlength="3" bindblur="into"></input>
	      <button size="mini" bindtap="cal" data-name="add" :data-information="item">＋</button>
	      </view>      
	  </view>
	  </view>
	<!-- 存在购物车商品信息结束-->
	
	   
	
	  <!-- 底部组件开始-->
	  <view class="bottom" v-if="login"> 
	    <checkbox-group bindtap="cal"  data-name="allchang"> 
	    <checkbox color="#3c9cff" :checked="AllChecked" ></checkbox>
	    <text>全选</text> 
	    </checkbox-group> 
	    <view class="count">总计:￥{{totalPrice}}</view>
	    <view class="btn1" bindtap="set">{{bluetittle}}</view>
	    <view class="btn2" bindtap="Regler">{{redtittle}}({{totalNum}})</view>
	  </view>
	  <!-- 底部组件结束-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				  cart: [],
					AllChecked: false,
					totalPrice: 0,
					totalNum: 0,
					chang: false,
					bluetittle: "编辑",
					redtittle: "结算",
					login:false
			}
		},
		mounted() {
		 this.cart = uni.getStorageSync("cart")||[];
		 this.login = true
		},
		methods: {
			 cal(e) {
			        let cart = uni.getStorageSync('cart')
			        var information = e.currentTarget.dataset.information
			        let name = e.currentTarget.dataset.name
			        let index
			        if (information) { index = cart.findIndex(v => v.fid === information.fid) }
			        if (name == "del") {
			            if (--cart[index].num < 1) {
			                cart[index].num = 1
			                uni.showToast({
			                    title: '不能再少啦',
			                    icon: 'none',
			                    duration: 1500,
			                    mask: true,
			                });
			            }
			        } else if (name == "add") {
			            if (++cart[index].num >= 999) {
			                cart[index].num = 999
			                uni.showToast({
			                    title: '不能再多啦',
			                    icon: 'none',
			                    duration: 1500,
			                    mask: true,
			                });
			            }
			        } else if (name == "chang") {
			            cart[index].checked = !cart[index].checked;
			        } else if (name == "allchang") {
			            let AllChecked = !this.data.AllChecked
			            cart.forEach(v => { v.checked = AllChecked })
			        }
			        this.setCart(cart)
			    },
			set() {
				let chang = !this.data.chang
				this.setData({
					chang,
					bluetittle: chang ? "完成" : "编辑",
					redtittle: chang ? "删除" : "结算"
				})
			},
		Regler() {
			var that = this
			if (this.data.chang) {
				uni.showModal({
					title: '提示',
					content: '是否确定删除？',
					showCancel: true,
					cancelText: '取消', 
					cancelColor: '#3c9cff',
					confirmText: '确定',
					confirmColor: '#000',
					success: (res) => {
						if (res.confirm) {
							app.DelShoppingCar()
							that.setCart(uni.getStorageSync("cart"))
						}
					},
					fail: () => {},
					complete: () => {}
				});
			} else {
				let cart = uni.getStorageSync('cart')||[]
				if(cart.length>0){
				uni.navigateTo({
				  url: '/pages/pay/index',
				})
			}else{
				uni.showToast({
				  title: '购物车还没有商品哦，快去看看心意的东西吧！',
				  icon:'none'
				})
			}
			}
		},
		into(e) {
			this.setData({
				num: e.detail.value - 0
			})
		},
		 setCart(cart) {
				let AllChecked = true
				let totalPrice = 0
				let totalNum = 0
				AllChecked = cart.length ? true : false
				cart.forEach(v => {
					if (v.checked) {
						totalPrice +=v.num * v.discount
						totalNum += v.num
					} else {
						AllChecked = false
					}
				})
				totalPrice = totalPrice.toFixed(2)
				if (cart) {
					this.setData({
						cart,
						AllChecked,
						totalPrice,
						totalNum
					})
				}
				uni.setStorageSync("cart", cart);
			},
		 turnto(e) {
				var information = e.currentTarget.dataset.information
				var ifm = JSON.stringify(information)
				uni.navigateTo({
					url: information.url + '?products=' + ifm,
				})
				
			},
		}
	}
</script>

<style scoped>
.shoppingcar {
  height: calc(100vh - 95px);
  background-color: rgba(246, 246, 246, 1);
}
.shoppingcar .chang .cart {
  padding: 25rpx;
  border-bottom: 1rpx solid #ccc;
  position: relative;
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.shoppingcar .chang .cart checkbox-group {
  flex: 1;
}
.shoppingcar .chang .cart checkbox-group checkbox {
  margin: 0 20rpx;
  color: red;
}
.shoppingcar .chang .cart .navigator {
  flex: 12;
  display: flex;
  justify-content: center;
  align-items: center;
}
.shoppingcar .chang .cart .navigator image {
  flex: 2;
  width: 167rpx;
  height: 133rpx;
}
.shoppingcar .chang .cart .navigator .information {
  flex: 5;
  margin-left: 20rpx ;
}
.shoppingcar .chang .cart .navigator .information .select {
  font-size: 24rpx;
  color: #ccc;
  margin-top: 15rpx;
}
.shoppingcar .chang .cart .navigator .information .price {
  margin-top: 15rpx;
  color: red;
}
.shoppingcar .chang .cart .btn {
  position: absolute;
  right: 15rpx;
  bottom: 30rpx;
}
.shoppingcar .chang .cart .btn button {
  float: left;
  padding: 0 10rpx;
}
.shoppingcar .chang .cart .btn .btn1 {
  padding: 0 20rpx;
}
.shoppingcar .chang .cart .btn input {
  float: left;
  width: 100rpx;
  height: 60rpx;
  text-align: center;
  background-color: #EEE;
  margin: 0 10rpx;
}
.shoppingcar .none {
  width: 100%;
  height: 100%;
}
.shoppingcar .none>view {
  width: 100%;
  color: #666;
  display: flex;
  height: 60vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.shoppingcar .none view image {
  width: 300rpx;
  margin-bottom: 30rpx;
}
.shoppingcar .none view .nologin {
  text-align: center;
}
.shoppingcar .none view .nologin navigator {
  margin-top: 70rpx;
}
.shoppingcar .none view .nologin navigator text {
  color: white;
  padding: 18rpx 25rpx;
  border-radius: 15rpx;
  Letter-spacing: 6rpx;
  font-weight: bold;
  font-size: 30rpx;
  background-color:#3c9cff;
}
.shoppingcar .none view .login {
  text-align: center;
}
.shoppingcar .bottom {
  width: 100%;
  height: 75rpx;
  display: flex;
  border-top: 1rpx solid #ccc;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  text-align: center;
  line-height: 75rpx;
}
.shoppingcar .bottom checkbox-group {
  flex: 1;
}
.shoppingcar .bottom .count {
  flex: 2;
  text-align: left;
  color: red;
}
.shoppingcar .bottom .btn1 {
  flex: 1;
  color: white;
  background-color: var(--themeColor);
}
.shoppingcar .bottom .btn2 {
  color: white;
  flex: 1;
  background-color: #ee3030;
}
</style>
